<template>
	<view class="">
		<u-sticky>
			<view class="searchTop u-flex u-row-between ">
				<u-image src="/static/logo.png" width="80" height="80" mode="" v-if="!ismore"></u-image>
				<u-search placeholder="搜索" v-model="keyword" :animation="true" :action-style="{color:'#fff'}"
					@focus="focus" @blur="blur" @search="search" @custom="search" :input-style="{width:'520rpx'}">
				</u-search>
			</view>
		</u-sticky>
		
		<view class="u-flex u-padding-30 u-border-bottom" v-for="(item,index) in list" :key="index" @click="detail(item)">
		   <view >
			   <u-image :src="item.cover" width="180" height="120"></u-image>
		   </view>	
		   <view class="u-margin-left-20">
			   <view style="font-weight: bold;font-size: 30rpx;">{{item.title}}</view>
			   <view style="color: #999;margin-top: 20rpx;">{{item.address}}</view>
		   </view>
		 
		</view>
		
		<!-- <u-loadmore :status="status" /> -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],	
				status: 'loadmore',
				ismore:false,
				keyword:""
				
			}
		},
		onLoad() {
			
		},
		onReachBottom() {
			if (this.status == 'nomore') {
		
			} else {
				this.goods()
			}
		
		},
		methods:{
			focus() {
				this.ismore = true
			},
			blur() {
				this.ismore = false
			},
			search() {
				this.page = 1;
				this.adv()
			},
			detail(item){
				uni.navigateTo({
					url:"./detail?id="+item.id +'&current='+item.type
				})
			},
			clknav(e){
				this.current=e;
				this.page=1
				this.adv()
			},
			adv(){
				this.$u.post('/api/index/ad', {
				   page:this.page,
				   keyword:this.keyword
				}).then(res => {
					var resList = res.data;
					if (this.page == 1) {
						this.list = []
					}
					if (resList.length > 9) {
						this.status = 'loadmore'
						this.page = this.page + 1
					} else {
						this.status = 'nomore'
					}
					this.list = this.list.concat(resList)
					this.loading = false
				}).catch(err => {
				
				})
			
			}
		}
	}
</script>

<style lang="scss">
	.searchTop {
	
		background: #007502;
		padding: 10rpx 30rpx 30rpx 30rpx;
		position: relative;
	
	}
	.sear{
	  position: absolute;
	  right:   0rpx;
	  vertical-align: middle;
	  width: 80rpx;
	  top: 0;
	}
	.navBlock{
		width: 400rpx;
		margin:auto;
		display: flex;
		text-align: center;
		border: 1rpx solid #FFFFFF;
		height: 70rpx;
		font-size: 32rpx;
		border-radius: 40rpx;
		line-height: 70rpx;
		color: #FFFFFF;
		
		
		.change{
			background: #fff;
			border-radius: 40rpx;
			color:#007502 ;
			
		}
		.nav{
			text-align: center;
		     width: 200rpx;
			
		}
	}
	
</style>
